<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - AI小助手</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee',
            secondary: '#3f37c9',
            ai: '#38b000', // AI专属绿色调
            aiLight: '#e6f7ee',
            light: '#f8f9fa',
            dark: '#212529'
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      }
      .ai-bubble {
        @apply rounded-2xl p-4 max-w-[85%] relative;
      }
      .typing-indicator {
        @apply flex space-x-1;
      }
      .typing-indicator span {
        @apply w-2 h-2 bg-gray-400 rounded-full animate-bounce;
      }
      .typing-indicator span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .typing-indicator span:nth-child(3) {
        animation-delay: 0.4s;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <nav class="bg-white nav-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <button class="text-gray-500 hover:text-primary transition-colors">
        <i class="fa fa-arrow-left text-lg"></i>
      </button>
      <div class="flex items-center">
        <div class="w-8 h-8 rounded-full bg-ai/10 flex items-center justify-center text-ai mr-2">
          <i class="fa fa-robot"></i>
        </div>
        <h1 class="text-lg font-bold text-dark">AI学习小助手</h1>
      </div>
      <button class="text-gray-500 hover:text-primary transition-colors">
        <i class="fa fa-history text-lg"></i>
      </button>
    </div>
  </nav>

  <!-- 功能提示条 -->
  <div class="bg-aiLight text-ai text-sm py-2 px-4 flex items-center justify-center">
    <i class="fa fa-lightbulb-o mr-2"></i>
    <span>AI可帮你解答课程问题、梳理解题思路，复杂问题建议同时咨询老师哦～</span>
  </div>

  <!-- 对话内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6 overflow-y-auto" id="chatContainer">
    <!-- 欢迎消息 -->
    <div class="flex items-start mb-6">
      <div class="w-10 h-10 rounded-full bg-ai/10 flex items-center justify-center text-ai flex-shrink-0 mr-3">
        <i class="fa fa-robot"></i>
      </div>
      <div class="ai-bubble bg-aiLight text-dark">
        <p>你好呀！我是校园AI学习小助手～</p>
        <p class="mt-2">可以帮你解答课程问题，比如：</p>
        <ul class="list-disc ml-5 mt-1 space-y-1">
          <li>定积分的换元法怎么用？</li>
          <li>讲解一下C语言中的指针概念</li>
          <li>物理中的能量守恒定律应用场景</li>
        </ul>
        <p class="mt-2">请告诉我你的问题吧～</p>
      </div>
    </div>

    <!-- 历史对话 - 学生提问 -->
    <div class="flex items-start justify-end mb-6">
      <div class="ai-bubble bg-primary text-white">
        <p>你能讲解一下洛必达法则的使用条件吗？我总是用错</p>
      </div>
    </div>

    <!-- 历史对话 - AI回答 -->
    <div class="flex items-start mb-6">
      <div class="w-10 h-10 rounded-full bg-ai/10 flex items-center justify-center text-ai flex-shrink-0 mr-3">
        <i class="fa fa-robot"></i>
      </div>
      <div class="ai-bubble bg-aiLight text-dark">
        <p class="font-medium">洛必达法则（L'Hôpital's Rule）用于求解"0/0"或"∞/∞"型不定式极限，使用需满足3个条件：</p>
        <ol class="list-decimal ml-5 mt-2 space-y-2">
          <li>当x→a（或x→∞）时，函数f(x)和g(x)都趋于0或都趋于无穷大；</li>
          <li>在点a的某去心邻域内（或当|x|足够大时），f'(x)和g'(x)都存在且g'(x)≠0；</li>
          <li>极限lim[f'(x)/g'(x)]存在或为无穷大。</li>
        </ol>
        <p class="mt-2">举个例子：求lim(x→0) sinx/x，这是"0/0"型，满足条件，应用法则后得lim(x→0) cosx/1 = 1。</p>
        <div class="mt-3 flex flex-wrap gap-2">
          <button class="text-xs bg-white text-ai px-2 py-1 rounded-full hover:bg-gray-100 transition-colors">
            举更多例子
          </button>
          <button class="text-xs bg-white text-ai px-2 py-1 rounded-full hover:bg-gray-100 transition-colors">
            用公式表示
          </button>
        </div>
      </div>
    </div>

    <!-- 历史对话 - 学生追问 -->
    <div class="flex items-start justify-end mb-6">
      <div class="ai-bubble bg-primary text-white">
        <p>那如果不满足这些条件，强行使用会怎么样？能举个错误案例吗？</p>
      </div>
    </div>

    <!-- AI正在输入 -->
    <div class="flex items-start mb-6">
      <div class="w-10 h-10 rounded-full bg-ai/10 flex items-center justify-center text-ai flex-shrink-0 mr-3">
        <i class="fa fa-robot"></i>
      </div>
      <div class="ai-bubble bg-aiLight text-dark">
        <div class="typing-indicator">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </main>

  <!-- 输入区域 -->
  <div class="bg-white border-t border-gray-200 p-4 sticky bottom-0 z-40">
    <div class="relative max-w-5xl mx-auto">
      <textarea id="questionInput" placeholder="向AI提问（如：讲解微积分基本定理）..." 
        class="w-full pl-4 pr-16 py-3 border border-gray-300 rounded-full input-focus transition-all resize-none text-sm"></textarea>
      <button id="sendBtn" class="absolute right-2 bottom-2 w-10 h-10 bg-ai hover:bg-ai/90 text-white rounded-full flex items-center justify-center transition-all">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
    
    <!-- 快捷提问 -->
    <div class="flex flex-wrap gap-2 mt-3 justify-center">
      <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors">
        高数公式查询
      </button>
      <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors">
        物理定律讲解
      </button>
      <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors">
        代码错误分析
      </button>
      <button class="text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-full transition-colors">
        英语语法解释
      </button>
    </div>
  </div>

  <script>
    // 模拟AI对话功能
    document.addEventListener('DOMContentLoaded', function() {
      const chatContainer = document.getElementById('chatContainer');
      const questionInput = document.getElementById('questionInput');
      const sendBtn = document.getElementById('sendBtn');

      // 发送提问
      function sendQuestion() {
        const question = questionInput.value.trim();
        if (!question) return;

        // 添加用户提问到对话区
        const userBubble = document.createElement('div');
        userBubble.className = 'flex items-start justify-end mb-6';
        userBubble.innerHTML = `
          <div class="ai-bubble bg-primary text-white">
            <p>${question}</p>
          </div>
        `;
        chatContainer.appendChild(userBubble);

        // 清空输入框并滚动到底部
        questionInput.value = '';
        chatContainer.scrollTop = chatContainer.scrollHeight;

        // 显示AI正在输入
        const typingBubble = document.createElement('div');
        typingBubble.className = 'flex items-start mb-6';
        typingBubble.innerHTML = `
          <div class="w-10 h-10 rounded-full bg-ai/10 flex items-center justify-center text-ai flex-shrink-0 mr-3">
            <i class="fa fa-robot"></i>
          </div>
          <div class="ai-bubble bg-aiLight text-dark">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        `;
        chatContainer.appendChild(typingBubble);
        chatContainer.scrollTop = chatContainer.scrollHeight;

        // 模拟AI回复延迟
        setTimeout(() => {
          // 移除"正在输入"状态
          chatContainer.removeChild(typingBubble);

          // 生成AI回复（实际项目中应调用API）
          const aiReply = generateAIReply(question);
          const aiBubble = document.createElement('div');
          aiBubble.className = 'flex items-start mb-6';
          aiBubble.innerHTML = `
            <div class="w-10 h-10 rounded-full bg-ai/10 flex items-center justify-center text-ai flex-shrink-0 mr-3">
              <i class="fa fa-robot"></i>
            </div>
            <div class="ai-bubble bg-aiLight text-dark">
              ${aiReply}
            </div>
          `;
          chatContainer.appendChild(aiBubble);
          chatContainer.scrollTop = chatContainer.scrollHeight;
        }, 1500);
      }

      // 模拟AI回复生成（实际项目中替换为API调用）
      function generateAIReply(question) {
        // 简单匹配问题关键词，返回对应回复
        if (question.includes('洛必达') && question.includes('错误案例')) {
          return `
            <p>强行使用会导致结果错误，比如这个案例：</p>
            <p class="mt-2 font-medium">求lim(x→1) (x³+2x-3)/(x²-1)</p>
            <p class="mt-1">这是"0/0"型，正确解法：</p>
            <p class="mt-1 pl-3">1. 因式分解：原式=lim(x→1)(x-1)(x²+x+3)/[(x-1)(x+1)] = lim(x→1)(x²+x+3)/(x+1) = 5/2</p>
            <p class="mt-2">若错误使用洛必达法则两次：</p>
            <p class="mt-1 pl-3">1. 第一次求导：(3x²+2)/(2x) → 代入x=1得5/2（结果正确但过程冗余）</p>
            <p class="mt-1 pl-3">2. 若继续错误求导：6x/2 → 代入x=1得3（结果错误）</p>
            <p class="mt-2">错误原因：第一次求导后已不是不定式，继续使用违反条件。</p>
          `;
        } else {
          return `<p>感谢你的提问！关于"${question}"，我可以为你提供详细解答。</p>
                  <p class="mt-2">由于问题涉及专业知识点，建议你提供更多背景信息（如课程章节、具体例题），我会给出更精准的解析～</p>`;
        }
      }

      // 绑定发送事件
      sendBtn.addEventListener('click', sendQuestion);
      questionInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          sendQuestion();
        }
      });

      // 快捷提问按钮
      document.querySelectorAll('.text-xs.bg-gray-100').forEach(btn => {
        btn.addEventListener('click', () => {
          questionInput.value = btn.textContent.trim();
          questionInput.focus();
        });
      });
    });
  </script>
</body>
</html>